<template>
  <div class="finance-management">
    <!-- 财务汇总看板 -->
    <div class="financial-summary">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-statistic
            title="本月应收"
            :value="summary.currentMonthIncome"
            suffix="元"
          />
        </el-col>
        <el-col :span="6">
          <el-statistic
            title="当前欠费"
            :value="summary.totalArrears"
            suffix="元"
            :value-style="{ color: summary.totalArrears > 0 ? '#ff4d4f' : '' }"
          />
        </el-col>
        <el-col :span="6">
          <el-statistic
            title="年度收入"
            :value="summary.annualIncome"
            suffix="元"
          />
        </el-col>
        <el-col :span="6">
          <el-statistic title="入驻企业" :value="summary.enterpriseCount" />
        </el-col>
      </el-row>
    </div>

    <!-- 账单查询功能区 -->
    <div class="query-section">
      <el-form :inline="true">
        <el-form-item label="企业名称">
          <el-input
            v-model="queryParams.enterpriseName"
            placeholder="请输入企业名称"
          />
        </el-form-item>
        <el-form-item label="账单月份">
          <el-date-picker
            v-model="queryParams.billMonth"
            type="month"
            value-format="YYYY-MM"
            placeholder="选择月份"
          />
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select
            v-model="queryParams.paymentStatus"
            clearable
            style="width: 100px"
          >
            <el-option label="未支付" value="unpaid" />
            <el-option label="已支付" value="paid" />
            <el-option label="已逾期" value="overdue" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 账单列表 -->
    <el-table :data="billList" border stripe>
      <el-table-column prop="billNumber" label="账单编号" width="180" />
      <el-table-column label="企业信息">
        <template #default="{ row }">
          <div class="enterprise-info">
            <div class="name">{{ row.enterpriseName }}</div>
            <div class="type">{{ row.enterpriseType }}</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="billMonth" label="账单月份" width="120" />
      <el-table-column
        prop="amount"
        label="金额（元）"
        align="right"
        width="120"
      >
        <template #default="{ row }">
          {{ row.amount.toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column label="支付状态" width="120">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.paymentStatus)" effect="plain">
            {{ getStatusText(row.paymentStatus) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dueDate" label="到期日" width="120" />
      <el-table-column label="操作" width="180">
        <template #default="{ row }">
          <el-button
            v-if="row.paymentStatus === 'unpaid'"
            type="primary"
            size="small"
            @click="handlePayment(row)"
          >
            立即支付
          </el-button>
          <el-button type="default" size="small" @click="viewDetails(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 账单详情弹窗 -->
    <el-dialog v-model="detailVisible" title="账单详情" width="600px">
      <el-descriptions :column="2" border>
        <el-descriptions-item label="账单编号">{{
          currentBill.billNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="企业名称">{{
          currentBill.enterpriseName
        }}</el-descriptions-item>
        <el-descriptions-item label="账单月份">{{
          currentBill.billMonth
        }}</el-descriptions-item>
        <el-descriptions-item label="金额"
          >{{ currentBill.amount }} 元</el-descriptions-item
        >
        <el-descriptions-item label="生成时间">{{
          currentBill.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="到期时间">{{
          currentBill.dueDate
        }}</el-descriptions-item>
        <el-descriptions-item label="支付状态">
          <el-tag :type="getStatusType(currentBill.paymentStatus)">
            {{ getStatusText(currentBill.paymentStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="费用明细" :span="2">
          <el-table :data="currentBill.feeDetails" size="small">
            <el-table-column prop="item" label="项目" />
            <el-table-column prop="amount" label="金额" align="right">
              <template #default="{ row }">
                {{ row.amount.toLocaleString() }} 元
              </template>
            </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 支付弹窗 -->
    <el-dialog v-model="paymentVisible" title="在线支付" width="400px">
      <div class="payment-content">
        <div class="amount">支付金额：{{ currentBill.amount }} 元</div>
        <div class="qrcode">
          <img src="" alt="支付二维码" />
          <div class="tip">请使用支付宝/微信扫码支付</div>
        </div>
        <el-button type="success" @click="confirmPayment">已完成支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryParams: {
        enterpriseName: '',
        billMonth: '',
        paymentStatus: ''
      },
      summary: {
        currentMonthIncome: 284500,
        totalArrears: 86500,
        annualIncome: 3246800,
        enterpriseCount: 28
      },
      billList: [
        {
          billNumber: 'BILL202307001',
          enterpriseId: 1,
          enterpriseName: 'XX科技公司',
          enterpriseType: '研发',
          billMonth: '2023-07',
          amount: 18500,
          paymentStatus: 'paid',
          dueDate: '2023-07-25',
          createTime: '2023-07-01 10:00',
          feeDetails: [
            { item: '基础租金', amount: 15000 },
            { item: '物业管理费', amount: 2500 },
            { item: '水电费', amount: 1000 }
          ]
        },
        {
          billNumber: 'BILL202307002',
          enterpriseId: 1,
          enterpriseName: '科技公司',
          enterpriseType: '研发',
          billMonth: '2023-07',
          amount: 18500,
          paymentStatus: 'unpaid',
          dueDate: '2023-07-25',
          createTime: '2023-07-01 10:00',
          feeDetails: [
            { item: '基础租金', amount: 15000 },
            { item: '物业管理费', amount: 2500 },
            { item: '水电费', amount: 1000 }
          ]
        }
        // 更多账单数据...
      ],
      detailVisible: false,
      paymentVisible: false,
      currentBill: {}
    }
  },
  methods: {
    handleSearch() {
      // 实现筛选逻辑
    },
    getStatusType(status) {
      const types = {
        paid: 'success',
        unpaid: 'danger',
        overdue: 'warning'
      }
      return types[status] || ''
    },
    getStatusText(status) {
      const texts = {
        paid: '已支付',
        unpaid: '未支付',
        overdue: '已逾期'
      }
      return texts[status] || status
    },
    viewDetails(row) {
      this.currentBill = row
      this.detailVisible = true
    },
    handlePayment(row) {
      this.currentBill = row
      this.paymentVisible = true
    },
    confirmPayment() {
      this.$message.success('支付状态已更新')
      this.paymentVisible = false
      // 实际应调用API更新支付状态
      this.currentBill.paymentStatus = 'paid'
    }
  }
}
</script>

<style scoped>
.financial-summary {
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.query-section {
  margin-bottom: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
}

.enterprise-info .name {
  font-weight: 500;
  margin-bottom: 4px;
}
.enterprise-info .type {
  color: #666;
  font-size: 12px;
}

.payment-content {
  text-align: center;
}
.payment-content .amount {
  font-size: 18px;
  margin-bottom: 20px;
}
.payment-content .qrcode img {
  width: 200px;
  height: 200px;
  margin: 10px 0;
}
.payment-content .tip {
  color: #666;
  margin: 10px 0;
}
</style>
